<template>
  <!-- 复习 -->
  <div class="min">
    <div class="fximg">
      <span class="fx">复习</span>
      <img src="../assets/homeimg/复习时钟.png" />
    </div>
    <ul class="nav">
      <li
        @click="next(index)"
        class="list"
        :class="{active:index==isActive}"
        v-for="(a,index) in list"
        :key="index"
      >
        <span class="title">{{a}}</span>
        <span class="line"></span>
      </li>
    </ul>
    <div class="box">
      <ul v-if="isShow">
        <router-link tag="li" class="kgde" v-for="item in arr1" :key="item.id" to>
          <p class="kcname">
            <span class="name">{{item.name}}</span>
            <span class="pinfen">
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            </span>
          </p>
          <p class="jiyi">{{item.title}}</p>
          <div class="chakan">
            <div class="left">
              <span>学习了{{item.num}}遍</span>
              <img class="jiantou" src="../assets/homeimg/滑动右.png" alt />
            </div>
            <div class="right">
              <span>复习</span>
              <img class="jiantou" src="../assets/homeimg/滑动右.png" alt />
            </div>
          </div>
          <p class="bord"></p>
          <p class="time">{{item.createtime}}</p>
        </router-link>
      </ul>
      <ul v-else>
        <router-link tag="li" class="kc" v-for="item in arr2" :key="item.id" :to="`/studyReport/${item.id}`">
          <p class="kcname">
            <span class="name">{{item.name}}</span>
            <span class="pinfen">
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
              <img src="../assets/homeimg/形状 3 拷贝 2.png" />
            </span>
          </p>
          <p class="jiyi">{{item.title}}</p>
          <div class="chakan">
            <div class="left">
              <span>学习了{{item.num}}遍</span>
              <img class="jiantou" src="../assets/homeimg/滑动右.png" alt />
            </div>
            <div class="right">
              <span>已开课</span>
              <img class="jiantou" src="../assets/homeimg/滑动右.png" alt />
            </div>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
import fuxiApi from "@/api/fuxi";
export default {
  data() {
    return {
      isShow: true,
      isActive: 0,
      token: "",
      list: ["我的收藏", "我的报告"],
      arr1: [
        // {
        //   name: "课程3",
        //   text: "名人谈记忆",
        //   num: 1, //学习了几遍
        //   date: "2020年03月20日 08：00"
        // },
        // {
        //   name: "课程2",
        //   text: "图形的记忆-圆星三角",
        //   num: 1, //学习了几遍
        //   date: "2020年03月20日 08：00"
        // }
      ],
      arr2: [
        // {
        //   name: "课程1",
        //   text: "名人谈记忆",
        //   num: 1, //学习了几遍
        //   date: "2020年03月20日 08：00"
        // }
      ]
    };
  },
  created() {
    if (localStorage.getItem("token")) {
      this.token = JSON.parse(localStorage.getItem("token"));
    }
    this.getCollectList();
  },
  methods: {
    next(index) {
      this.isActive = index;
      if (index == 0) {
        this.isShow = true;
        this.getCollectList();
      } else {
        this.isShow = false;
        this.getReportList();
      }
    },
    getCollectList() {
      fuxiApi.myCollect({
        token:this.token
      }).then(res=>{
        console.log(res);
        this.arr1 = res.data.data;
      })
    },
    getReportList(){
      fuxiApi.report({
        token:this.token
      }).then(res=>{
        console.log(res);
        this.arr2 = res.data.data;
      })
    }
  }
};
</script>
<style lang="scss" scoped="scoped">
.min {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  // flex: 1;
}
.fximg {
  width: 100%;
  height: 11rem;
  position: relative;
  // background: url('~@/assets/homeimg/复习时钟.png') no-repeat;
  // background-size: 100% 100%
  .fx {
    position: absolute;
    top: 2.5rem;
    left: 1.875rem;
    font-size: 1.1875rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 2.1875rem;
  }
  img {
    width: 100%;
    height: 11rem;
  }
}
.nav {
  width: 8.75rem;
  height: 2.5rem;
  // position: absolute;
  // bottom: 20px;
  // left: 20px;
  display: flex;
  margin-top: -3.125rem;
  margin-left: 1.25rem;
  z-index: 99;
  .list {
    width: 3.75rem;
    position: relative;
    .title {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: 2.1875rem;
    }
    .line {
      position: absolute;
      bottom: 0;
      left: 20px;
      width: 1.25rem;
      height: 0.1875rem;
      // background: rgba(253, 150, 19, 1);
      background: transparent;
      border-radius: 0.0625rem;
    }
  }
  .list.active {
    margin-right: 0.625rem;
    .title {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: 2.1875rem;
    }
    .line {
      background: rgba(253, 150, 19, 1);
    }
  }
}
.box {
  width: 100%;
  flex: 1;
  // padding: 0 0.9375rem 0 0.9375rem;
  margin: 0 auto;
  margin-top: 0.625rem;
}
.kgde {
  width: 20rem;
  height: 9.375rem;
  margin: 0 auto;
  background: #fff;
  padding: 0 0.75rem;
  padding-top: 0.625rem;
  margin-top: 0.9375rem;
  border-radius: 0.3125rem;
}
.kc {
  width: 20rem;
  height: 107px;
  margin: 0 auto;
  background: #fff;
  padding: 0 0.75rem;
  padding-top: 0.625rem;
  margin-top: 0.9375rem;
  border-radius: 0.3125rem;
}
.kcname {
  display: flex;
  justify-content: space-between;
}
.name {
  color: #333333;
  font-size: 1rem;
  font-weight: bold;
}
.jiyi {
  color: #333333;
  font-size: 1rem;
  height: 2.5rem;
  line-height: 2.5rem;
}
.chakan {
  display: flex;
  justify-content: space-between;
  color: #999999;
  font-size: 0.75rem;
  height: 1.25rem;
  line-height: 1.25rem;
  .left {
    display: flex;
  }
  .right {
    display: flex;
    width: 4.375rem;
    height: 1.5rem;
    background: #fafafa;
    border-radius: 0.75rem;
    span {
      margin-left: 0.9375rem;
    }
  }
}
.jiantou {
  display: block;
  width: 0.375rem;
  height: 0.625rem;
  margin-top: 0.375rem;
  margin-left: 0.5rem;
}
.bord {
  width: 100%;
  border-bottom: 1px solid #dcdcdc;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}
.time {
  color: #999999;
  font-size: 0.75rem;
  text-align: right;
}
.pinfen img {
  width: 1rem;
  height: 0.9375rem;
  margin: 0 0.1875rem;
}
</style>
